<template>
  <div class="formRender" data-fileOid="OR:wt.content.ApplicationData:1119567683">
    <!-- INPUT -->
    <el-input
      v-if="option.filedType === 'INPUT' && option.dataType !== 'java.lang.Long'"
      :disabled="!!option.readOnly"
      v-model="bindData[option.name]"
      clearable
      :placeholder="option.readOnly ? '自动生成' : '请输入内容'"
      @input="inputChange"
    ></el-input>
    <!-- INPUTBUTTON -->
    <el-input
      v-if="options.filedType === 'INPUTBUTTON' && option.dataType !== 'java.lang.Long'"
      clearable
      :disabled="!!option.readOnly"
      v-model="bindData[option.name]"
      :placeholder="option.readOnly ? '自动生成' : '请输入内容'"
    >
      <template #append>
        <el-button
          style="font-size: 14px; color: rgba(0, 0, 0, 0.9); font-weight: bold"
          @click="inputButton(option)"
        >
          {{ option['buttonValue'] }}
        </el-button>
      </template>
    </el-input>

    <!-- INPUT 数字 -->
    <el-input
      v-else-if="option.filedType === 'INPUT' && option.dataType !== 'java.lang.String'"
      class="numberInput"
      type="number"
      v-model.trim="bindData[option.name]"
      placeholder="请输入数字"
      :disabled="!!option.readOnly"
    ></el-input>
    <!-- SELECT -->
    <el-select
      v-else-if="option.filedType === 'SELECT'"
      style="width: 100%"
      v-model="bindData[option.name]"
      :multiple="!option.single"
      :filterable="!option.single"
      placeholder="请选择内容"
      :disabled="!!option.readOnly"
      :clearable="true"
      @change="inputChange($event, option.name)"
    >
      <el-option
        v-for="item in option.options"
        :key="item.optionValue"
        :label="item.optionLabel"
        :value="item.optionValue"
      ></el-option>
    </el-select>
    <!-- TREESELECT -->
    <el-tree-select
      v-else-if="option.filedType === 'TREESELECT'"
      style="width: 100%"
      v-model="bindData[option.name]"
      :data="option.options"
      :props="option.props"
      :node-key="option.nodeKey"
      check-strictly
      :render-after-expand="false"
    />
    <!-- REMOTESELECT -->
    <RemoteSelect
      v-else-if="option.filedType === 'REMOTESELECT'"
      :option="option"
      :data="data"
    ></RemoteSelect>
    <!-- DATE -->
    <el-date-picker
      v-else-if="option.filedType === 'DATE'"
      style="width: 100%"
      v-model="bindData[option.name]"
      type="date"
      placeholder="选择日期"
      value-format="YYYY/MM/DD"
      :disabled="!!option[prop.readOnly]"
      @change="inputChange"
    ></el-date-picker>
    <!-- TEXTAREA -->
    <el-input
      v-else-if="option.filedType === 'TEXTAREA'"
      type="textarea"
      :rows="4"
      placeholder="请输入内容"
      v-model="bindData[option.name]"
      @input="inputChange"
      :disabled="!!option.readOnly"
    ></el-input>
    <!-- RADIO -->
    <el-radio-group
      v-else-if="option.filedType === 'RADIO'"
      v-model="bindData[option.name]"
      :disabled="!!option.readOnly"
    >
      <el-radio v-for="item in option.options" :key="item.optionValue" :label="item.optionValue">
        {{ item.optionLabel }}
      </el-radio>
    </el-radio-group>
    <!-- UPLOAD -->
    <el-upload
      v-else-if="option.filedType === 'UPLOAD'"
      :auto-upload="false"
      v-model:file-list="bindData[option.name]"
      action="/"
    >
      <el-button type="primary">上传</el-button>
    </el-upload>
    <!-- BUTTON -->
    <div class="button" v-else-if="option.filedType === 'BUTTON'">
      <!-- <div> -->
      <el-input
        placeholder="请输入内容"
        v-model="option.displayValue"
        clearable
        @clear="inputClear(option)"
        @change="changeInput(option)"
      >
        <!-- <i slot="suffix" class="el-input__icon el-icon-search"></i> -->
        <template #append>
          <el-button @click="option.showDialog = true" :icon="Search" />
        </template>
      </el-input>
      <!-- </div> -->
      <slot :name="option.name" :option="option"></slot>
    </div>
    <div v-else-if="option.filedType === 'DISPLAY'">
      <!-- 对产品目录，销售目录，PBI团队特殊处理 -->
      <slot :name="option.name" :option="option">
        <a
          v-if="option.dataType === 'com.ptc.core.meta.common.TypeInstanceIdentifier'"
          class="goPage"
          :href="option.value"
          target="_blank"
        >
          {{ option.displayValue }}
        </a>
        <span v-else v-html="option.displayValue || option.value"></span>
      </slot>
    </div>
    <!-- 操作指南 -->
    <template v-else-if="option.filedType === 'HYPERLINK'">
      <div v-for="item in getLinkData(option)" :key="item.fileOid">
        <el-link type="primary" :underline="false" @click="downloadTips(item)">
          {{ '请点击下载：' + item.fileName }}
        </el-link>
      </div>
    </template>
  </div>
</template>

<script setup>
const $api = window.$api;
import { useDownloadFile } from '@/hooks';
import { inject } from 'vue';
import { Search } from '@element-plus/icons-vue';
const { option, data } = defineProps({
  option: {
    type: Object,
    default: () => {
      return {};
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emit = defineEmits(['inputChange']);
const bindData = computed(() => {
  return data;
});
const inputChange = (val, name) => {
  if (name === 'IsRegionVerCtrl') {
    emit('inputChange', val, name);
  }
};

const handleFunction = inject('handleFunction', null);
const inputButton = (option) => {
  // 调用函数 -- 从爷组件中获取共享的函数
  if (handleFunction) {
    handleFunction(option);
  }
};

const getLinkData = (data) => {
  const originStr = data.filedType === 'HYPERLINK' ? data.displayValue : data.descriptionFile;
  const str = JSON.parse(originStr);
  const arr = Object.keys(str);
  const regex = /(<a>)([^]+)(<\/a>)/g;
  const splitStr = [];
  arr.forEach((item) => {
    splitStr.push(str[item]);
  });
  const newArr = arr.map((item) => {
    const itemStr = str[item].replace(regex, ',,,');
    const itemStr_n = str[item].split('\n');
    return {
      fileOid: item,
      descPrev: itemStr.split(',,,')[0] || itemStr_n[0].replace(regex, ''),
      descNext: itemStr_n[1] || itemStr.split(',,,')[1],
      fileName:
        data.filedType === 'HYPERLINK'
          ? str[item]
          : str[item]?.match(regex)[0].replace(regex, '$2'),
    };
  });
  return newArr;
};
const downloadTips = ({ fileOid, fileName }) => {
  $api.createApi
    .downloadContent({ oid: fileOid })
    .then((result) => {
      if (!result) return window.$message.error('下载失败');
      useDownloadFile(result, fileName);
    })
    .catch((err) => {});
};
// change 事件
const changeInput = (option, prop) => {
  bindData.value[option.name] = option[prop.displayValue];
};
/**
 * 清空
 */
const inputClear = (option, value) => {
  bindData.value[option.name] = '';
};
</script>

<style scoped lang="less">
.formRender {
  display: inline-block;
  width: 90%;
}
.formRender :deep(input[type='number']) {
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}
.inputBox {
  display: flex;
  .numberInput {
    flex: 1;
  }
  .unit {
    padding-left: 16px;
  }
}
.button {
  :deep(.el-dialog__body) {
    padding: 20px 20px 10px;
  }
  :deep(.el-input--suffix) {
    .el-input__wrapper {
      box-shadow: none;
      border: 1px solid var(--el-input-border-color);
    }
    .el-input-group__append {
      background-color: #fff;
    }
  }
}
.goPage {
  color: #5bb73b;
  &:hover {
    color: #64d83d;
  }
  &:avtive {
    color: #67d641;
  }
}
.dialog {
  :deep(.el-dialog__body) {
    padding: 12px 20px;
    max-height: 60vh;
    overflow-y: auto;
  }
}
</style>
